//所有带轮播的图片
const images = document.querySelectorAll('#img2')
//获取页码
const page = document.querySelector('#page')
// 总图片数
const lens = images.length
//定义变量，保存当前显示图片的索引，即将显示图片的索引
let prIndex = 0, neIndex = 1
// 定时器 id
let timers

//默认第一张显示
images[0].style.display = 'block'
page.innerHTML = 1;

// 定义轮播处理的函数
function plays() {
	//修改索引
	images[prIndex].style.display = 'none'
	prIndex = neIndex
	neIndex += 1
	if(neIndex >= lens){ // 最后一个索引后，回到第一个
		neIndex = 0
	}
	// console.log(prIndex)
	images[prIndex].style.display = 'block'
	
	// 页码
	page.innerHTML = (prIndex + 1);
}

// 实现自动轮播效果
timers = setInterval(plays, 3000)

// 处理事件，鼠标移入/移出轮播图，停止/重启自动轮播
S('#tab-img').addEventListener('mouseenter', function() {
  clearInterval(timers)
}, false)
S('#tab-img').addEventListener('mouseleave', function() {
  timer = setInterval(plays, 3000)
}, false)

// 翻页效果
S('#prev2').addEventListener('click',() => {
	// 设置 neIndex
	neIndex = prIndex - 1
	if(neIndex < 0){
		neIndex = lens - 1
	}
	// 轮播
	plays()
},false)
S('#next2').addEventListener('click',plays,false)

